<script lang="ts" setup>
import aj from './aj/index.vue'
import ysp from './ysp/index.vue'
import ajwsgl from './ajwjgl/index.vue'
import yspwjgl from './yspwjgl/index.vue'
import dzjzwjgl from './dzjzwjgl/index.vue'
import ajxx from './aj/components/ajxx.vue'
import mlxx from './aj/components/mlxx.vue'
import ryxx from './aj/components/ryxx.vue'
import yspxx from './ysp/components/yspxx.vue'
import wsjzglService from '@/api/wsjzgl'
import yspglService from '@/api/yspgl'

import { ref, onMounted, nextTick } from 'vue'
import { useMainStore } from '@/store/main'
import { useSidebarStore } from '@/store/sidebar'
import { ElMessage } from 'element-plus'

// 获取ref
const ajwsglRef = ref()
const ajAjxxRef = ref()
const ajRyxxRef = ref()
const ajMlxxRef = ref()
const yspxxRef = ref()
const ajRef = ref()
const yspRef = ref()
const yspwjglRef = ref()

const store = useMainStore()
// 入参
const props = defineProps({
  daxq: {
    type: Object,
    default: () => ({}),
  },
})
// 生命周期
onMounted(() => {
  const tab = props.daxq?.fldm === 1 ? 'first' : 'second'
  activeName.value = tab
  handleClick(tab)
  // rightTabChangeTabs('ajxx')
})

const activeName = ref('')
const handleClick = (tab: any) => {
  switch (tab) {
    case 'first':
      ajRef.value?.init()
      break
    case 'second':
      yspRef.value?.init()
      break
    default:
      break
  }
}

const leftSmall = ref<boolean>(false)
const rightSmall = ref<boolean>(false)

const dragFlag = ref<boolean>(false)
const moveLenLeft = ref<number>(0)
const moveLenRight = ref<number>(0)

// 菜单store，获取它收起/展开状态
const sideStore = useSidebarStore()
/*
 * 拖拽事件
 */
// 初始距离
// 是否按下
const dragstart = () => {
  dragFlag.value = true
}
const dragLeft = (e: any) => {
  if (!dragFlag.value || !e.clientX) {
    return
  }
  let left = 0
  if (sideStore.collapse) {
    left = 86
  } else {
    left = 206
  }
  if (e.clientX && e.clientX - left <= 300) {
    moveLenLeft.value = 300
  } else if (e.clientX && e.clientX - left >= 400) {
    moveLenLeft.value = 400
  } else {
    moveLenLeft.value = e.clientX - left
  }
}
const screenRef = ref<any>()
const dragRight = (e: any) => {
  const screenWidth = JSON.parse(JSON.stringify(screenRef.value.offsetWidth || 0))
  if (!dragFlag.value || !e.clientX) {
    return
  }
  let left = 0
  if (sideStore.collapse) {
    left = 86
  } else {
    left = 206
  }
  if (screenWidth - e.clientX && screenWidth - e.clientX + left <= 300) {
    moveLenRight.value = 300
  } else if (screenWidth - e.clientX && screenWidth - e.clientX + left >= 400) {
    moveLenRight.value = 400
  } else {
    moveLenRight.value = screenWidth - e.clientX + left
  }
}
const dragend = () => {
  dragFlag.value = false
}

const rightTabActiveName = ref('ajxx')

// 案卷传递过来方法
const nodeClick = (data: any) => {
  store.saveNodeTreeData(data)
  if (data.cj === 1) {
    rightTabActiveName.value = 'ajxx'
    rightTabChangeTabs('ajxx')
  } else if (data.cj === 2) {
    rightTabActiveName.value = 'mlxx'
    rightTabChangeTabs('mlxx')
  }
  getWjList()
}

// 音视频传递过来方法
const yspNodeClick = (data: any) => {
  store.saveNodeTreeData(data)
  if (data.cj === 1 || !data.cj) return
  // 判断
  if (data.fbh === 'gd0020002' || data.fbh === 'gd0020001') {
    getYspList()
  } else {
    getPhotoList()
  }
}

const wjlxChangeEvent = () => {
  getWjList()
}

const ysplbChangeEvent = () => {
  getYspList()
}

const rightTabChangeTabs = (tab: string) => {
  switch (tab) {
    case 'ajxx':
      ajAjxxRef.value?.init()
      break
    case 'ryxx':
      ajRyxxRef.value?.init()
      break
    case 'mlxx':
      ajMlxxRef.value?.init()
      break
    default:
      break
  }
}

// 案卷复卷列表
const getWjList = () => {
  const params = {
    ajbh: store.$state.nodeTreeData?.wsajbh || store.$state.nodeTreeData?.ajbh,
    mlbh: store.$state.nodeTreeData?.mlbh,
  }
  wsjzglService
    .queryWjList(params)
    .then((res) => {
      nextTick(() => {
        ajwsglRef.value.getWjxqxx(res.data)
      })
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}

// 音视频目录列表
const getYspList = () => {
  const params = {
    dabh: store.$state.nodeTreeData?.dabh,
    mlbh: store.$state.nodeTreeData?.bh,
  }
  yspglService
    .getYspmlxx(params)
    .then((res) => {
      nextTick(() => {
        yspwjglRef.value.getWjxqxx(res.data)
        yspxxRef.value.getWjxqxx(res.data)
      })
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}

// 获取图片目录列表
const getPhotoList = () => {
  const params = {
    dabh: store.$state.nodeTreeData?.dabh,
    mlbh: store.$state.nodeTreeData?.bh,
  }
  yspglService
    .getZpmlxx(params)
    .then((res) => {
      nextTick(() => {
        yspwjglRef.value.getWjxqxx(res.data)
      })
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}
</script>
<template>
  <div class="container" ref="screenRef">
    <div class="content">
      <div
        class="left"
        :class="{ small: leftSmall }"
        :style="{ width: moveLenLeft ? moveLenLeft + 'px' : '' }"
      >
        <el-tabs
          v-model="activeName"
          class="demo-tabs"
          @tab-change="handleClick"
          type="card"
          v-show="!leftSmall"
        >
          <el-tab-pane label="案卷" name="first" v-if="daxq.fldm === 1">
            <aj :daxq="daxq" ref="ajRef" @nodeClick="nodeClick" />
          </el-tab-pane>
          <el-tab-pane label="音视频" name="second" v-if="daxq.fldm === 31">
            <ysp :daxq="daxq" ref="yspRef" @nodeClick="yspNodeClick" />
          </el-tab-pane>
        </el-tabs>
        <div class="left-img" @click="leftSmall = !leftSmall">
          <img src="@/assets/images/zsq.png" alt="" v-if="!leftSmall" />
          <img src="@/assets/images/ysq.png" alt="" v-else-if="leftSmall" />
        </div>
      </div>
      <!--拖动div-->
      <div
        class="search-drag-box"
        :draggable="true"
        title="可左右拖动"
        @dragstart="dragstart()"
        @dragend="dragend()"
        @drag="dragLeft($event)"
      >
        <div class="dragImg">
          <el-icon class="dargIcon" color="#bdcae2"><MoreFilled /></el-icon>
        </div>
      </div>
      <div class="center">
        <ajwsgl ref="ajwsglRef" v-if="activeName === 'first'" @wjlxChangeEvent="wjlxChangeEvent" />
        <yspwjgl
          ref="yspwjglRef"
          v-if="activeName === 'second'"
          @ysplbChangeEvent="ysplbChangeEvent"
        />
        <dzjzwjgl v-if="activeName === 'third'" />
      </div>
      <!--拖动div-->
      <div
        class="search-drag-box"
        :draggable="true"
        title="可左右拖动"
        @dragstart="dragstart()"
        @dragend="dragend()"
        @drag="dragRight($event)"
      >
        <div class="dragImg">
          <el-icon class="dargIcon" color="#bdcae2"><MoreFilled /></el-icon>
        </div>
      </div>
      <div
        class="right"
        :class="{ small: rightSmall }"
        :style="{ width: moveLenRight ? moveLenRight + 'px' : '' }"
      >
        <div class="right-img" @click="rightSmall = !rightSmall">
          <img src="@/assets/images/ysq.png" alt="" v-if="!rightSmall" />
          <img src="@/assets/images/zsq.png" alt="" v-else-if="rightSmall" />
        </div>

        <el-tabs
          v-if="activeName === 'first' && !rightSmall"
          type="card"
          v-model="rightTabActiveName"
          @tab-change="rightTabChangeTabs"
        >
          <el-tab-pane label="案卷信息" name="ajxx">
            <ajxx ref="ajAjxxRef"></ajxx>
          </el-tab-pane>
          <el-tab-pane label="人员信息" name="ryxx">
            <ryxx ref="ajRyxxRef"></ryxx>
          </el-tab-pane>
          <el-tab-pane label="目录信息" name="mlxx">
            <mlxx ref="ajMlxxRef"></mlxx>
          </el-tab-pane>
        </el-tabs>
        <el-tabs v-if="activeName === 'second'" type="card">
          <el-tab-pane label="音视频信息">
            <yspxx ref="yspxxRef"></yspxx>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  .top {
    .header {
      color: #fff;
      width: 100%;
      height: 50px;
      background-image: linear-gradient(0deg, #0093df 0%, #0057a0 100%);
      display: flex;
      justify-content: space-between;
      .header-left {
        display: flex;
        align-items: center;
        padding: 0 0 0 10px;
      }
      .header-right {
        height: 100%;
        width: 500px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .buttonBox {
          display: flex;
          align-items: center;
          img {
            padding-right: 5px;
          }
        }
      }
    }
  }
  .content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background-color: #ecf1fa;

    .left {
      width: 350px;
      height: 100%;
      position: relative;
      background-color: #fff;
    }
    .left > .left-img {
      cursor: pointer;
      position: absolute;
      right: 0;
      top: calc(50% - 27px);
      z-index: 9;
    }
    .center {
      flex: 1;
      flex-shrink: 0;
      background-color: #fff;
    }
    .right {
      width: 350px;
      height: 100%;
      position: relative;
      background-color: #fff;
    }
    .right > .right-img {
      cursor: pointer;
      position: absolute;
      left: 0;
      top: calc(50% - 27px);
      z-index: 9;
    }
  }
  :deep(.el-tabs__content) {
    padding: 10px;
  }
}
.small {
  width: 16px !important;
  border: none !important;
}
.search-drag-box {
  margin: 0 1px;
  flex-shrink: 0;
  width: 10px;
  height: 100%;
  cursor: col-resize;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;

  .dragImg {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    .dargIcon {
      font-size: 29px;
      transform: rotate(90deg);
    }
  }
}
</style>
